<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 按钮 -->
      <el-button type="primary" @click="dialogFormVisible = true"
        >添加分类</el-button
      >
      <!-- 弹出框 -->
      <el-dialog
        title="添加分类"
        :visible.sync="dialogFormVisible"
        @close="addClose"
      >
        <el-form :model="form" :rules="rules" ref="fromRef">
          <el-form-item
            label="分类名称 : "
            :label-width="formLabelWidth"
            prop="name"
          >
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="父级分类 : " :label-width="formLabelWidth">
            <el-cascader
              :options="categoriesList"
              :props="{ checkStrictly: true }"
              clearable
              style="width: 100%"
              popper-class="pc-sel-area-cascader"
            ></el-cascader>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!-- 表格 -->
      <el-table
        :data="categoriesList1"
        style="width: 100%; margin-bottom: 20px"
        row-key="cat_id"
        border
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'cat_deleted' }"
      >
        <el-table-column type="index" :index="indexMethod" width="50">
        </el-table-column>
        <el-table-column prop="cat_name" label="分类名称"> </el-table-column>
        <el-table-column label="是否有效">
          <template>
            <i class="el-icon-success" style="color: #67c23a"></i>
          </template>
        </el-table-column>
        <el-table-column prop="cat_level" label="标签" width="100">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.cat_level === 0 ? 'primary' : 'success'"
              disable-transitions
              >{{ scope.row.cat_level === 0 ? '一级' : '二级' }}</el-tag
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      form: {
        name: '',
      },
      formLabelWidth: '100px',
      currentPage4: 1,
      categoriesList: [],
      categoriesList1: [],
      pagenum: 0,
      pagesize: 5,
      total: 0,
      rules: {
        name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
      },
    }
  },
  async created() {
    this.getCategories()
    this.getCategories1()
  },
  methods: {
    async getCategories() {
      const res = await this.$http({
        url: 'categories',
        params: {
          type: 2,
          pagenum: 1,
          pagesize: '',
        },
      })
      // console.log(res.data.data)
      const arr = []
      res.data.data.map((item) => {
        let n = item.children.map((item) => ({
          ...item,
          value: item.cat_name,
          label: item.cat_name,
        }))
        // console.log(n);
        arr.push(n)
      })
      // console.log(arr)
      this.categoriesList = res.data.data.map((item, i) => ({
        ...item,
        value: item.cat_name,
        label: item.cat_name,
        children: arr[i],
      }))
      // console.log(this.categoriesList)
    },
    async getCategories1() {
      const res = await this.$http({
        url: 'categories',
        params: {
          type: 2,
          pagenum: this.pagenum,
          pagesize: this.pagesize,
        },
      })
      console.log('111111111',res)
      const arr = []
      res.data.data.result.map((item) => {
        let n = item.children.map((item) => ({
          ...item,
          value: item.cat_name,
          label: item.cat_name,
        }))
        // console.log(n);
        arr.push(n)
      })
      // console.log(arr)
      this.categoriesList1 = res.data.data.result.map((item, i) => ({
        ...item,
        value: item.cat_name,
        label: item.cat_name,
        children: arr[i],
      }))
      this.total = res.data.data.total
      // console.log(this.categoriesList1)
    },
    addClose() {
      this.$refs.fromRef.resetFields()
    },
    indexMethod(index) {
      return index + 1
    },
    async handleSizeChange(val) {
      this.pagesize = val
      console.log(`每页 ${val} 条`)
      this.getCategories1()
    },
    async handleCurrentChange(val) {
      this.pagenum = val
      console.log(`当前页: ${val}`)
      this.getCategories1()
    },
  },
}
</script>

<style lang="less" scoped>
</style>
